import React from 'react';
import {numberHandle, parsePercent} from '~/utils/number';
import CommonEchart from '../../../common/CommonEchart';

const precision = 2;

// const tooltipCallback = params => {
//     const {
//         marker,
//         data: {name, proportion, originValue}
//     } = params;
//     return `${marker}${name}<br />百分比: ${parsePercent(
//         proportion
//     )}<br />收入: ${numberHandle(originValue, 2)}`;
// };

const tooltipCallback = params => {
    const {
        data: {originValue, name, proportion}
    } = params;
    return `${name}: ${numberHandle(originValue, 2)}<br/>占比: ${parsePercent(proportion)}`;
};

const labelFormatter = params => {
    const {
        data: {name, proportion, originValue}
    } = params;
    if (proportion < 0.05) {
        return;
    }
    return `${name}: ${parsePercent(proportion)}`;
};

const extendOptions = {
    chartId: 'IncomeStructurePieChart',
    tooltip: {
        trigger: 'item',
        formatter: tooltipCallback
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: 'middle',
        type: 'scroll',
        align: 'left'
    },
    series: {
        common: {
            radius: '45%',
            center: ['40%', '50%'],
            label: {formatter: labelFormatter},
            // emphasis: {
            //     itemStyle: {
            //         shadowBlur: 10,
            //         shadowOffsetX: 0,
            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            // }
        }
    }
};

const IncomeStructurePieChart = props => (
    <CommonEchart {...props} extendEchartsOptions={extendOptions} />
);

export default IncomeStructurePieChart;
